@-webkit-keyframes qn {
  0% {
    transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
  }
}
@-webkit-keyframes qw {
  0% {
    transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
    -ms-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
    -o-transform: rotateZ(-360deg);
  }
}
.kp_qw {
  -webkit-animation: qw 8s linear 0s infinite;
  -o-animation: qw 8s linear 0s infinite;
  animation: qw 8s linear 0s infinite;
}
.kp_qn {
  -webkit-animation: qn 8s linear 0s infinite;
  -o-animation: qn 8s linear 0s infinite;
  animation: qn 8s linear 0s infinite;
}
@-webkit-keyframes go {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -10px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
.wrap {
  margin: 0px auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.swiper-container,
.swiper-slide {
  overflow: hidden;
}
.swiper-container,
.swiper-slide,
.swiper-wrapper {
  width: 100%;
  height: 100%;
}
.page_01 img,
.page_02 img {
  width: 100%;
}
.page_01 {
  width: 100%;
  height: 100%;
  /*background: -webkit-linear-gradient(top, #030921 0%, #000000 100%);*/
  position: relative;
  background-image: url(../images/bg.png);
  background-position: center center;
  background-size: cover;
}
.go {
  position: absolute;
  bottom: 2%;
  width: 10%;
  left: 45%;
  -webkit-animation: go 1.5s linear 0s infinite;
}
@keyframes rank1_move {
  0% {
    /*margin-top:-100%;*/
    left: 110%;
    top: -100px;
  }
  100% {
    /*margin-top:24%;*/
    left: 50%;
    top: 16%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
  }
}
@keyframes rank2_move {
  0% {
    right: 110%;
    top: -100px;
  }
  100% {
    right: 5.33%;
    top: 6%;
  }
}
@keyframes rank3_move {
  0% {
    left: 110%;
    top: -100px;
  }
  100% {
    left: 3.4%;
    top: 12%;
  }
}
@keyframes bImg_yx1 {
  0% {
    right: -1rem;
    bottom: -3rem;
  }
  100% {
    left: 40%;
    bottom: 0;
  }
}
@keyframes bImg_zs2 {
  0% {
    left: -1rem;
    top: -3rem;
  }
  100% {
    left: 57%;
    top: 0;
  }
}
@keyframes bImg_zx2 {
  0% {
    left: -1rem;
    bottom: -3rem;
  }
  100% {
    left: 57%;
    bottom: 0;
  }
}
@keyframes bImg_ys2 {
  0% {
    right: -1rem;
    top: -3rem;
  }
  100% {
    right: 15%;
    top: 0;
  }
}
@keyframes bImg_yx2 {
  0% {
    right: -1rem;
    bottom: -3rem;
  }
  100% {
    right: 15%;
    bottom: 0;
  }
}
.rank1_ani {
  -webkit-animation: rank1_move 1s ease-in-out forwards;
  animation: rank1_move 1s ease-in-out forwards;
}
.rank2_ani {
  -webkit-animation: rank2_move 1s ease-in-out forwards;
  animation: rank2_move 1s ease-in-out forwards;
}
.rank3_ani {
  -webkit-animation: rank3_move 1s ease-in-out forwards;
  animation: rank3_move 1s ease-in-out forwards;
}
.rank1 {
  width: 36vw;
  height: 42vw;
  /*margin: 11vh auto 0;*/
  margin: 0 auto;
  position: absolute;
  left: 110%;
  top: -100px;
}
.rank2 {
  width: 28vw;
  height: 32vw;
  position: absolute;
  right: 110%;
  top: -100px;
}
.rank3 {
  width: 28vw;
  height: 32vw;
  position: absolute;
  left: 110%;
  top: -100px;
}
.book_img1 {
  /*position: absolute;*/
  margin: 0 auto;
  width: 36vw;
  height: 42vw;
  background: url("../images/rank/big_%20polygon.png");
  background-repeat: round;
}
.book_img2 {
  /*position: absolute;*/
  width: 28vw;
  height: 32vw;
  background: url("../images/rank/big_%20polygon.png");
  background-repeat: round;
}
.book_img3 {
  /*position: absolute;*/
  width: 28vw;
  height: 32vw;
  background: url("../images/rank/big_%20polygon.png");
  background-repeat: round;
}
.book_img1 img,
.book_img2 img,
.book_img3 img {
  width: 60%;
  margin: auto;
  display: block;
  padding-top: 12%;
}
.book_rank p {
  font-size: 4vw;
  float: left;
  margin-left: 26%;
  /*margin-top: 5px;*/
}
.book_rank span {
  font-size: 4vw;
  float: left;
  width: 5vw;
  height: 5vw;
  border: 1px solid #FC3737;
  border-radius: 100%;
  background: #A32B32;
  display: block;
  text-align: center;
  line-height: 5vw;
  /*margin-top: 5px;*/
}
.book_des {
  width: 100%;
  margin-top: 2rem;
  text-align: center;
  font-size: 3.8vw;
  color: #98c3ec;
}
.book_des p {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes draw {
  0% {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
  100% {
    stroke-dasharray: 61rem;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}
.outer_shape {
  fill: transparent;
  stroke: #099D94;
  -webkit-animation: 1s draw linear forwards;
  animation: 1s draw linear forwards;
}
.inner_shape {
  fill: transparent;
  stroke: #099D94;
  -webkit-animation: 1s draw linear forwards;
  animation: 1s draw linear forwards;
}
@keyframes bImg_zs1 {
  0% {
    left: -5rem;
    top: -13rem;
  }
  100% {
    left: 15%;
    top: 0;
  }
}
@keyframes bImg_zx1 {
  0% {
    left: -4rem;
    bottom: -13rem;
  }
  100% {
    left: 15%;
    bottom: 0;
  }
}
@keyframes bImg_ys1 {
  0% {
    right: -5rem;
    top: -14rem;
  }
  100% {
    left: 40%;
    top: 0;
  }
}
@keyframes bImg_yx1 {
  0% {
    right: -6rem;
    bottom: -13rem;
  }
  100% {
    left: 40%;
    bottom: 0;
  }
}
@keyframes bImg_zs2 {
  0% {
    left: -3rem;
    top: -11rem;
  }
  100% {
    left: 57%;
    top: 0;
  }
}
@keyframes bImg_zx2 {
  0% {
    left: -7rem;
    bottom: -16rem;
  }
  100% {
    left: 57%;
    bottom: 0;
  }
}
@keyframes bImg_ys2 {
  0% {
    right: -6rem;
    top: -10rem;
  }
  100% {
    right: 15%;
    top: 0;
  }
}
@keyframes bImg_yx2 {
  0% {
    right: -6rem;
    bottom: -13rem;
  }
  100% {
    right: 15%;
    bottom: 0;
  }
}
.bImg_moveZS1 {
  -webkit-animation: bImg_zs1 1s ease-in-out forwards;
  animation: bImg_zs1 1s ease-in-out forwards;
}
.bImg_moveYS1 {
  -webkit-animation: bImg_ys1 1s ease-in-out forwards;
  animation: bImg_ys1 1s ease-in-out forwards;
}
.bImg_moveYX1 {
  -webkit-animation: bImg_yx1 1s ease-in-out forwards;
  animation: bImg_yx1 1s ease-in-out forwards;
}
.bImg_moveZX1 {
  -webkit-animation: bImg_zx1 1s ease-in-out forwards;
  animation: bImg_zx1 1s ease-in-out forwards;
}
.bImg_moveZS2 {
  -webkit-animation: bImg_zs2 1s ease-in-out forwards;
  animation: bImg_zs2 1s ease-in-out forwards;
}
.bImg_moveYS2 {
  -webkit-animation: bImg_ys2 1s ease-in-out forwards;
  animation: bImg_ys2 1s ease-in-out forwards;
}
.bImg_moveYX2 {
  -webkit-animation: bImg_yx2 1s ease-in-out forwards;
  animation: bImg_yx2 1s ease-in-out forwards;
}
.bImg_moveZX2 {
  -webkit-animation: bImg_zx2 1s ease-in-out forwards;
  animation: bImg_zx2 1s ease-in-out forwards;
}
.zero {
  position: relative;
  overflow: hidden;
}
.zero .first_logo_box {
  width: 100%;
  height: 50%;
  position: relative;
  margin-top: 10%;
}
.zero .first_logo_box .logo_outer_circle {
  position: absolute;
  width: 81%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.zero .first_logo_box .logo_outer_circle div,
.zero .first_logo_box .logo_outer_circle img {
  width: 100%;
}
.zero .first_logo_box .logo_mid_circle {
  position: absolute;
  width: 68%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.zero .first_logo_box .logo_mid_circle div,
.zero .first_logo_box .logo_mid_circle img {
  width: 100%;
}
.zero .first_logo_box .logo_inner_circle {
  position: absolute;
  width: 60%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.zero .first_logo_box .logo_inner_circle div,
.zero .first_logo_box .logo_inner_circle img {
  width: 100%;
}
.zero .first_logo_box .logo_all_box {
  position: absolute;
  width: 45%;
  left: 27.5%;
  top: 30%;
}
.zero .first_logo_box .logo_all_box .logo_self {
  width: 50%;
  margin: 0 auto 8px;
}
.zero .first_logo_box .logo_all_box .logo_self img {
  width: 100%;
}
.zero .first_logo_box .logo_all_box .logo_txt {
  width: 100%;
  margin: auto;
}
.zero .first_logo_box .logo_all_box .logo_txt img {
  width: 100%;
}
.zero .first_des {
  position: absolute;
  width: 88%;
  text-align: center;
  left: 6%;
  top: 60%;
}
.zero .first_des p {
  font-size: 8vw;
  color: #148FED;
}
.zero .count_time {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0%;
  top: 84%;
  color: #148FED;
}
.zero .open {
  position: absolute;
  top: 70%;
  left: 50%;
  -webkit-transform: translate(-50%);
  width: 75%;
  height: 65px;
  margin: 0 auto;
  text-align: center;
  line-height: 65px;
  font-size: 6vw;
  color: #148FED;
  background-image: url(../images/firstpage/btn.png);
  background-repeat: round;
}
.page_01 {
  width: 100%;
  position: relative;
}
.page_01 .top {
  height: 40px;
  position: relative;
  padding: 0 5%;
}
.page_01 .top .back1 {
  position: absolute;
  width: 11px;
  height: 17px;
  top: 13px;
  left: 15px;
  background-image: url(../images/rank/b_arrow.png);
  background-position: center center;
  background-size: cover;
}
.page_01 .top img {
  width: 1.25rem;
  margin-right: 0.5rem;
}
.page_01 .top h3 {
  width: 100%;
  height: 100%;
  line-height: 40px;
  font-size: 5vw;
  color: #148fed;
}
.page_01 .bottom_rank {
  margin-top: 60%;
}
.page_01 .bottom_rank ul {
  padding-top: 14vh;
}
.page_01 .bottom_rank ul li {
  width: 90%;
  height: 30px;
  margin: auto;
  margin-bottom: 1.5vh;
  background-image: url(../images/rank/bot_border.png);
  background-repeat: round;
}
.page_01 .bottom_rank ul li span {
  float: left;
  color: #2985cf;
  font-family: 'ArialMT Regular';
  line-height: 30px;
}
.page_01 .bottom_rank ul li span:nth-of-type(1) {
  font-size: 4vw;
  margin-left: 5px;
}
.page_01 .bottom_rank ul li span:nth-of-type(2) {
  font-size: 4vw;
  margin-right: 45px;
  margin-left: 4px;
}
.page_01 .bottom_rank ul li span:nth-of-type(3) {
  width: 65%;
  font-size: 4.5vw;
}
.page_01.noticelist .top {
  padding-left: 40px;
}
.two .borders {
  width: 24.5rem;
  height: 7rem;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.two .borders .outer_q {
  position: absolute;
  left: 0;
  top: 0;
  width: 24rem;
  height: 6.5rem;
}
.two .borders .inner_q {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: 24rem;
  height: 6.5rem;
}
.two .borders .total_borrow {
  width: 23.5rem;
  height: 6rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
}
.two .borders .total_borrow p:nth-of-type(1) {
  margin-top: 0.3rem;
  padding: 0.625rem 0 0 0;
  font-size: 1.33333rem;
  color: #98a8c2;
}
.two .borders .total_borrow p:nth-of-type(2) {
  padding: 0.625rem 0;
  font-size: 2rem;
  color: #1bd747;
}
.two .bbox {
  margin-top: 6vh;
  margin-bottom: 6vh;
  position: relative;
}
.two .bbox .pub_img {
  position: absolute;
  width: 1rem;
  height: 1.16666rem;
}
.two .bbox img {
  width: 100%;
}
.two .bbox .borrow_zs {
  left: -1rem;
  top: -3rem;
}
.two .bbox .borrow_zx {
  left: -1rem;
  bottom: -3rem;
}
.two .bbox .borrow_ys {
  right: -1rem;
  top: -3rem;
}
.two .bbox .borrow_yx {
  right: -1rem;
  bottom: -3rem;
}
.two .bbox .borrow_zs2 {
  left: -1rem;
  top: -3rem;
}
.two .bbox .borrow_zx2 {
  left: -1rem;
  bottom: -3rem;
}
.two .bbox .borrow_ys2 {
  right: -1rem;
  top: -3rem;
}
.two .bbox .borrow_yx2 {
  right: -1rem;
  bottom: -3rem;
}
.two .bbox .borrow {
  margin-bottom: 3vh;
  width: 100%;
  padding: 0 8%;
}
.two .bbox .borrow li {
  float: left;
  width: 50%;
  height: 16%;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  position: relative;
  padding: 0 8%;
}
.two .bbox .borrow li .b_bg {
  width: 100%;
  position: relative;
  font-size: 2rem;
}
.two .bbox .borrow li .b_bg .b_title {
  font-size: 1.3rem;
  color: #98a8c2;
}
.two .bbox .borrow li .b_bg .b_num {
  margin-top: -1rem;
  padding-bottom: 0.3rem;
}
.two .bbox .borrow li .b_bg .b_num span {
  color: #C6E421;
}
.two .bbox .borrow li .b_bg .b_num span:nth-of-type(2) {
  font-size: 1rem;
}
.two .bbox .borrow .page6-wrap {
  background: red;
  margin: 0 auto;
}
.three {
  width: 100%;
  height: 100%;
  position: relative;
}
.three .comeTopBorder {
  width: 28rem;
  height: 16rem;
  margin: auto;
  position: relative;
}
.three #one {
  position: absolute;
  width: 27.5rem;
  height: 15.3rem;
  padding: 0.3rem;
  left: 0.5rem;
  top: 0.5rem;
}
.three #one img {
  width: 100%;
  height: 100%;
}
.three #two {
  position: absolute;
  left: 0;
  top: 0;
}
.three #third {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
}
.three .button1,
.three .button2 {
  width: 28rem;
  height: 16rem;
  position: relative;
  background-color: transparent;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  border: none;
  font-size: 15px;
  outline: none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.three .border {
  position: absolute;
  background: none;
  border: 1px solid #0365b6;
}
.three #third > .border:nth-of-type(1),
.three #two > .border:nth-of-type(1) {
  top: 0;
  left: 0;
  width: 28rem;
}
.three #third > .border:nth-of-type(2),
.three #two > .border:nth-of-type(2) {
  bottom: 0;
  left: 0;
  width: 28rem;
}
.three #third > .border:nth-of-type(3),
.three #two > .border:nth-of-type(3) {
  left: 0;
  top: -1px;
  height: 16rem;
}
.three #third > .border:nth-of-type(4),
.three #two > .border:nth-of-type(4) {
  top: -1px;
  right: 0;
  height: 16rem;
}
.three .border1 {
  border-top: 1px solid #0365b6;
  transform: translate(0, 15.85rem);
  transition: all 1s ease-in-out;
}
.three .border2 {
  border-bottom: 1px solid #0365b6;
  transform: translate(0, -16.35rem);
  transition: all 1s ease-in-out;
}
.three .border3 {
  border-left: 1px solid #0365b6;
  transform: translate(28rem, 0);
  transition: all 1s ease-in-out;
}
.three .border4 {
  border-right: 1px solid #0365b6;
  transform: translate(-28rem, 0);
  transition: all 1s ease-in-out;
}
@media screen and (max-width: 320px) {
  .three .comeTopBorder {
    width: 24.5rem;
  }
  .three #one {
    width: 23.5rem;
  }
  .three .button1,
  .three .button2 {
    width: 24rem;
  }
  .three #third > .border:nth-of-type(1),
  .three #two > .border:nth-of-type(1) {
    width: 24rem;
  }
  .three #third > .border:nth-of-type(2),
  .three #two > .border:nth-of-type(2) {
    width: 24rem;
  }
  .three .border3 {
    transform: translate(24rem, 0);
  }
  .three .border4 {
    transform: translate(-24rem, 0);
  }
}
.three .pernum {
  position: relative;
  margin-top: 25px;
  display: flex;
  justify-content: space-around;
  color: #b4dffb;
  margin-bottom: 10px;
}
.three .pernum .numone,
.three .pernum .numtwo,
.three .pernum .numthree {
  margin: 0 45px;
  width: 15px;
  height: 25vh;
  background-color: #192C5C;
  border-radius: 6px;
  position: relative;
  font-size: 5vw;
}
.three .pernum .numone .count1,
.three .pernum .numtwo .count1,
.three .pernum .numthree .count1,
.three .pernum .numone .count2,
.three .pernum .numtwo .count2,
.three .pernum .numthree .count2,
.three .pernum .numone .count3,
.three .pernum .numtwo .count3,
.three .pernum .numthree .count3 {
  position: absolute;
  display: none;
  z-index: 999;
}
.three .pernum .numone .bar1,
.three .pernum .numtwo .bar1,
.three .pernum .numthree .bar1,
.three .pernum .numone .bar2,
.three .pernum .numtwo .bar2,
.three .pernum .numthree .bar2,
.three .pernum .numone .bar3,
.three .pernum .numtwo .bar3,
.three .pernum .numthree .bar3 {
  position: absolute;
  z-index: 888;
  width: 100%;
  height: 0%;
  border-radius: 6px;
  background-color: #163D72;
  bottom: 0;
  left: 0;
}
.three .pernum .numone .bar3,
.three .pernum .numtwo .bar3,
.three .pernum .numthree .bar3 {
  height: 0%;
}
.three .pernum .numone .count1,
.three .pernum .numtwo .count1,
.three .pernum .numthree .count1,
.three .pernum .numone .count2,
.three .pernum .numtwo .count2,
.three .pernum .numthree .count2 {
  width: 76px;
  height: 45px;
  line-height: 30px;
  text-align: center;
  background: url(../images/count/striangle.png);
  background-size: 76px 45px;
  left: 50%;
  bottom: 0%;
  -webkit-transform: translate(-50%);
}
.three .pernum .numone .count3,
.three .pernum .numtwo .count3,
.three .pernum .numthree .count3 {
  width: 95px;
  height: 45px;
  line-height: 30px;
  text-align: center;
  background: url(../images/count/striangle.png);
  background-size: 95px 45px;
  left: 50%;
  bottom: 0%;
  -webkit-transform: translate(-50%);
}
.three .des {
  display: flex;
  justify-content: space-around;
  text-align: center;
  color: #b4dffb;
  font-size: 16px;
  margin-bottom: 2vh;
}
.three .totalPer {
  color: #b4dffb;
  font-size: 18px;
}
.three .totalPer p {
  margin-left: 30px;
}
.three .totalPer .box {
  width: 100%;
  padding: 0 20px;
  margin-top: 2vh;
}
.three .totalPer .box .rectangle_bg {
  width: 100%;
  height: 30px;
  position: relative;
  background-color: #192C5C;
  border-radius: 8px;
}
.three .totalPer .box .rectangle_bg .rectangle {
  height: 100%;
  width: 20px;
  line-height: 30px;
  position: absolute;
  font-size: 5.5vw;
  top: 0;
  left: 0;
  border-radius: 15px;
  padding-left: 10px;
  background: url(../images/count/rectangle.png);
}
@media screen and (min-width: 412px) {
  .three .totalPer {
    margin-top: 3rem;
  }
}
.four #mybanner {
  width: 80%;
}
.four #mybanner .mypagination {
  position: absolute;
  top: 1vh;
  left: 50%;
  -webkit-transform: translate(-50%);
  width: 30%;
  height: 3vh;
  boder: 1px solid red;
  z-index: 999;
  text-align: center;
}
.four #mybanner #bannerone {
  position: relative;
}
.four #mybanner #bannerone .go {
  position: absolute;
  left: 43.5%;
  bottom: 8%;
  z-index: 999999999;
  width: 12.5%;
}
.four #mybanner .banner_bg1 {
  margin: auto;
  width: 95%;
  padding: 5vh 3vw 2vh 3vw;
  background: url(../images/recommend/banner_bg.png);
  background-repeat: round;
}
.four #mybanner .banner_bg1 div,
.four #mybanner .banner_bg1 img:nth-of-type(1) {
  height: 100%;
}
.four #mybanner .banner_bg1 div {
  position: relative;
}
.four #mybanner .banner_bg1 div img:nth-of-type(2) {
  position: absolute;
  width: 50%;
  right: 0;
  bottom: 0;
}
.four #mybanner .banner_bg1 p {
  text-align: center;
  font-size: 6vw;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
.four #mybanner .banner_des {
  width: 75%;
  margin: auto;
  margin-top: 2vw;
  padding: 1vw 0;
  font-size: 4vw;
  text-align: center;
  vertical-align: middle;
}
.four #mybanner .banner_des span:nth-of-type(2) {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 0 3vw;
  text-shadow: 0 0 10px #fff;
  background-image: url(../images/recommend/num_bg.png);
  background-repeat: round;
}
.five {
  position: relative;
}
.five .notice_con {
  height: 66%;
  overflow: hidden;
  position: relative;
}
.five .notice_con .other {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.five .notice_con .other .longline {
  position: absolute;
  height: 96%;
  border: 1px solid rgba(74, 89, 117, 0.86);
  top: 3%;
  left: 23%;
  z-index: -9999;
  opacity: 0.2;
}
.five .notice_con .other .longline::before,
.five .notice_con .other .longline::after {
  /*1.一定设置content属性*/
  content: "";
  /*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素  float  display  position*/
  position: absolute;
  left: -3px;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  border: 1px solid #3970D5;
}
.five .notice_con .other .longline::before {
  top: -7px;
}
.five .notice_con .other .longline::after {
  bottom: -6px;
  border: 1px solid #3970D5;
}
.five .notice_con .other li {
  text-align: center;
  width: 90%;
  margin: 3vh auto;
}
.five .notice_con .other li .notice_date {
  float: left;
  margin-top: 8vw;
  color: #dce6f7;
}
.five .notice_con .other li .contact_icon {
  display: block;
  float: left;
  width: 22px;
  height: 20px;
  background-image: url(../images/notice/icon.png);
  background-repeat: round;
  margin-top: 7vw;
  margin-left: 3vw;
  position: relative;
}
.five .notice_con .other li .contact_icon .longline {
  position: absolute;
  height: 800px;
  border: 1px solid rgba(74, 89, 117, 0.86);
  top: -100%;
  left: 50%;
  -webkit-transform: translate(-50%);
  z-index: -9999;
  opacity: 0.2;
}
.five .notice_con .other li .contact_icon .longline::before,
.five .notice_con .other li .contact_icon .longline::after {
  /*1.一定设置content属性*/
  content: "";
  /*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素  float  display  position*/
  position: absolute;
  left: -3px;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  border: 1px solid #3970D5;
}
.five .notice_con .other li .contact_icon .longline::before {
  top: -7px;
}
.five .notice_con .other li .contact_icon .longline::after {
  bottom: -6px;
  border: 1px solid #3970D5;
}
.five .notice_con .other li .contact_line {
  display: block;
  float: left;
  margin-top: 2vw;
  margin-left: 3vw;
  color: #dce6f7;
}
.five .notice_con .other li .contact_line span {
  display: inline-block;
  width: 18vw;
  height: 5px;
  background-image: url(../images/notice/mline.png);
  background-repeat: round;
  vertical-align: bottom;
}
.five .notice_con .other li .notice_con {
  display: block;
  float: right;
  width: 50%;
  background-image: url(../images/notice/middle_frame.png);
  background-repeat: round;
  padding: 4vw 5vw 4vw 7vw;
  text-align: center;
  margin-right: 1vw;
}
.five .notice_con .other li .notice_con h3 {
  width: 100%;
  color: #80A7E7;
  font-size: 4vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.five .notice_con .other li .notice_con p {
  width: 100%;
  color: #77878B;
  font-size: 2vw;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
.five .notice_con .other li:first-child .contact_icon {
  margin-top: 8vw;
}
.five .notice_con .other li:first-child .contact_line {
  margin-top: 6vw;
  margin-left: 1vw;
  color: #dce6f7;
}
.five .notice_con .other li:first-child .contact_line p {
  margin-bottom: -3vw;
}
.five .notice_con .other li:first-child .contact_line span {
  width: 20vw;
  height: 5vw;
  background-image: url(../images/notice/top_line.png);
  background-repeat: round;
}
.five .notice_con .other li:first-child .notice_con {
  width: 51%;
  position: relative;
  background-image: url(../images/notice/first_frame.png);
}
.five .notice_con .other li:first-child .notice_con .new_icon {
  position: absolute;
  width: 30px;
  height: 20px;
  background-image: url(../images/notice/new.png);
  background-repeat: round;
  top: 1px;
  left: 12px;
}
.five .notice_con .other li:first-child .notice_con h3 {
  color: #0479D8;
}
.five .notice_con .other li:first-child .notice_con p {
  color: #C8E547;
}
.five .notice_con .other li:last-child .contact_line span {
  height: 6vw;
  width: 19vw;
  margin-top: 2vw;
  background-image: url(../images/notice/bottom_line.png);
  background-repeat: round;
}
.five .notice_con .other li:last-child .notice_con {
  width: 49%;
  background-image: url(../images/notice/last_frame.png);
}
.five .notice_con > p {
  height: 1.1rem;
  overflow: hidden;
}
.five .noticelist {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.five .noticelist .top {
  margin-bottom: 40px;
}
.five .noticelist .list {
  width: 80%;
  height: 75vh;
  margin: 8vh auto;
  background-image: url(../images/noticelist/fborder.png);
  background-repeat: round;
}
.five .noticelist .list .listitle {
  position: absolute;
  top: 11vh;
  left: 25vw;
  width: 50%;
  height: 7vh;
  font-size: 4vw;
  line-height: 6.5vh;
  padding: 0 3vw;
  color: #148fed;
  background-image: url(../images/noticelist/fborder_bg.png);
  background-repeat: round;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.five .noticelist .list .listcon {
  height: 90%;
  width: 85%;
  left: 7vw;
  top: 2vw;
  padding: 2vw 3vw;
  text-align: center;
  margin: auto;
}
.five .noticelist .list .listcon .botline {
  width: 60%;
  text-align: center;
  border-bottom: 1px solid rgba(220, 230, 247, 0.45);
  padding-bottom: 3vh;
  padding-top: 3vh;
  margin: 0 auto;
  margin-bottom: 3vh;
}
.five .noticelist .list .listcon .botline span {
  display: inline-block;
  color: #dce6f7;
  font-size: 3vw;
}
.five .noticelist .list .listcon .botpcon {
  width: 100%;
  height: 90%;
  overflow: hidden;
}
.five .noticelist .list .listcon .botpcon div p {
  overflow: hidden;
  color: #80A7E7;
  font-size: 4vw;
  text-indent: 8vw;
  text-align: left;
  margin-bottom: 1vh;
}
.star .allstar {
  width: 90%;
  margin: auto;
  border: 1px solid #01302f;
}
.star .allstar ul li {
  text-align: center;
  position: relative;
  padding: 1vh 5%;
  border-bottom: 1px solid #01302f;
}
.star .allstar ul li .s_head {
  width: 30%;
  margin: auto;
}
.star .allstar ul li .s_head img {
  width: 100%;
}
.star .allstar ul li .s_rank {
  width: 55%;
  height: 5vh;
  margin: 0.5vh auto;
  line-height: 5vh;
  background-image: url(../images/star/red_sbg.png);
  background-repeat: round;
}
.star .allstar ul li p {
  text-align: center;
  font-size: 3vw;
  color: #789dd9;
}
.star .allstar ul li .p_bg {
  width: 16%;
  height: 3.2vh;
  line-height: 3.2vh;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../images/star/red_bg.png);
  background-repeat: round;
}
.star .allstar ul li:nth-of-type(2) .s_rank {
  background-image: url(../images/star/yellow_sbg.png);
}
.star .allstar ul li:nth-of-type(2) .p_bg {
  background-image: url(../images/star/yellow_bg.png);
}
.star .allstar ul li:nth-of-type(3) {
  border-bottom: none;
}
.star .allstar ul li:nth-of-type(3) .s_rank {
  background-image: url(../images/star/green_sbg.png);
}
.star .allstar ul li:nth-of-type(3) .p_bg {
  background-image: url(../images/star/green_bg.png);
}
